*{
    margin: 0;
    padding: 0;
}
.game_title{
    text-align: center;
    white-space: nowrap;
    font-size: 24px;
    color: #2c3e50;
    font-weight: bold;
    line-height: 34px;
    margin: 15px 0;
}
.game_rule{
    position: fixed;
    left: 30px;
    bottom: 50px;
    width: 160px;
}
#game{
    width: 600px;
    height: 600px;
    margin:0 auto;
    .block{
        float: left;
        box-sizing: border-box;
        width: 25%;
        height: 25%;
        background: #f0f0f0;
        border:2px solid #ddd;
        cursor: pointer;
        &:hover{
            background: #2b84e0;
        }
        .pic{
            width: 100%;
            height: 100%;
            background: url(../images/1.png) no-repeat center center;
            transform: scaleX(0);
            transition:transform 0.2s;
        }
        &.on .pic{
            transform: scaleX(1);
        }
        &.done{
            background-color: #a5adb4;
        }
    }
}
.level_box{
    p{
        font-size:14px;
        margin: 10px 0;
        span{
            color:red;
        }
    }
    position: fixed;
    bottom: 50px;
    right: 30px;
    width: 160px;
    #level_select{
        outline: none;
        width: 100%;
        height: 30px;
        margin-bottom: 10px;
        padding: 0 8px;
        box-sizing: border-box;
        appearance:none;
        background:url(../images/arrow_down.png) no-repeat right center #fff;
        user-select: none;
    }
    .new_game{
        width: 100%;
        height: 36px;
        font-size: 14px;
        outline: none;
        border-radius: 5px;
        box-sizing: border-box;
        cursor: pointer;
        border: 3px solid #2b84d0;
        background-color: #2b84d0;
        color: #fff;
        &:hover{
            background-color: #fff;
            color: #2b84d0;
        }
    }
}
